<script type="text/javascript" objname="hua">
  var nodes = Frame.Helper.LoadIDS(["hua-mainview"]);
  var scer = new Frame.View.Scroller(
    nodes["hua-mainview"],
    500,
    true,
    this.hua
  );

  var p1ws = Frame.Helper.LoadIDSToArray(["hua-w1", "hua-w2", "hua-w3"]);
  this.hua.pfun1 = function () {
    Frame.Animation.stop(function () {
      //            p1ws[0].animal('Text','CharIn','slow-blurin',100);
      p1ws.animal("Text", "CharIn", "slow-blurin", 200);
    });
  };
  this.hua.lfun1 = function () {
    Frame.Animation.stop(function () {
      p1ws.animalClear();
    });
  };
  var p2s = Frame.Helper.LoadIDSToArray(["hua-w5", "hua-w4"]);
  this.hua.pfun2 = function () {
    Frame.Animation.stop(function () {
      p2s.animallist(
        "Text",
        "CharIn",
        [
          { aniname: "upin", count: 1 },
          { aniname: "leftin", count: 1 },
        ],
        200
      );
    });
  };
  this.hua.lfun2 = function () {
    Frame.Animation.stop(function () {
      p2s.animalClear();
    });
  };
  var p3s = Frame.Helper.LoadIDSToArray(["hua-w7", "hua-w6"]);
  this.hua.pfun3 = function () {
    Frame.Animation.stop(function () {
      p3s.animallist(
        "Text",
        "CharIn",
        [
          { aniname: "rotin", count: 1 },
          { aniname: "frotin", count: 1 },
        ],
        200
      );
    });
  };
  this.hua.lfun3 = function () {
    Frame.Animation.stop(function () {
      p3s.animalClear();
    });
  };
  document.getElementsByClassName("hua-back").usenode();
  p1ws.ContentInit();
  p2s.ContentInit();
  p3s.ContentInit();
  this.hua.pfun1();
</script>
<div id="hua-content">
  <div id="hua-mainview" class="v-view">
    <div
      id="hua-p1"
      content="true"
      pagefun="this.pfun1();"
      leavefun="this.lfun1();"
    >
      <div class="hua-back"><img class="photo" src="image/hua/1.jpg" /></div>
      <div class="hua-v" id="hua-w1">
        走了，走吧！ 让樱花载着独有的芬芳 无悔地踏过风雨泥泞 寻找落花归尘
      </div>
      <div class="hua-back"><img src="image/hua/2.jpg" class="photo" /></div>
      <div class="hua-v" id="hua-w2">
        白菊的灵魂，散落一地娇吟 归去的征程，随塞外白雪远航
      </div>
      <div class="hua-h" id="hua-w3">
        迷了眼睛的睫毛，寒在泪水中寻找倩影 洁白的精灵，被风雪封存在墓中
        轰鸣的礼炮哀鸣，众生祈祷 目送，一片樱花翩翩归去
      </div>
    </div>
    <div
      id="hua-p2"
      content="true"
      pagefun="this.pfun2();"
      leavefun="this.lfun2();"
    >
      <div class="hua-back"><img src="image/hua/3.jpg" class="photo" /></div>
      <div class="hua-v" id="hua-w5">
        关关雎鸠，在河之洲。窈窕淑女，君子好逑。
        参差荇菜，左右流之。窈窕淑女，寤寐求之。
      </div>
      <div class="hua-back"><img src="image/hua/4.jpg" class="photo" /></div>

      <div class="hua-v" id="hua-w4">
        求之不得，寤寐思服。悠哉悠哉，辗转反侧。
        参差荇菜，左右采之。窈窕淑女，琴瑟友之。
      </div>
    </div>
    <div
      id="hua-p3"
      content="true"
      pagefun="this.pfun3();"
      leavefun="this.lfun3();"
    >
      <div class="hua-back"><img src="image/hua/5.jpg" class="photo" /></div>
      <div class="hua-back"><img src="image/hua/6.jpg" class="photo" /></div>
      <div class="hua-back"><img src="image/hua/7.jpg" class="photo" /></div>
      <div class="hua-v" id="hua-w6">
        可是，这样的的女生真的好萌……双马尾的萌妹似乎就是与众不同……真是个神奇的世界
      </div>
      <div class="hua-h" id="hua-w7">
        有没有觉得很美呢？人类能有这样的美丽存在也是一件神奇的事情……双马尾的萌妹子啊……感觉如此与众不同
      </div>
    </div>
  </div>
</div>
<style>
  #hua-content {
    font-family: "maobi";
    margin: 20px 0 0 20px;
  }
  #hua-mainview > div {
    transition: margin-top 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
  }
  #hua-content {
    height: 100%;
    width: 100%;
  }
  .hua-v {
    writing-mode: vertical-lr;
    height: 60%;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
  }
  .hua-h {
    margin-top: 0.5em;
  }
  .hua-h,
  .hua-v {
    word-wrap: break-word;
    word-break: break-all;
  }

  .hua-v,
  .hua-h {
    font-size: 1.3em;
    line-height: 1.3;
  }
  .hua-back {
    height: 70%;
    display: inline-block;
    transition: all 0.2s linear;
  }
  .photoactive > img {
    display: block;
  }
  #hua-mainview img {
    height: 100%;
    margin: auto;
  }

  #hua-w1,
  #hua-w5 {
    width: 4em;
  }
  #hua-w2 {
    width: 5em;
  }

  #hua-w7 {
    width: 70%;
  }
  #hua-w6 {
    height: 70%;
  }
  #hua-w5 {
    height: 70%;
  }
  #hua-p3 .hua-back {
    margin-right: 10px;
  }
  #hua-p3 .hua-back:last-of-type {
    margin-right: 5px;
  }
</style>
